import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, InputNumber, Radio, Modal, Cascader,Button,Row,Col,Card } from 'antd'
import city from '../../utils/city'
import ReactDOM from 'react-dom';
import { Editor } from '../../components'
import { convertToRaw } from 'draft-js'
import draftToHtml from 'draftjs-to-html'
import draftToMarkdown from 'draftjs-to-markdown'

const FormItem = Form.Item
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      data.address = data.address.join(' ')
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  const  onEditorStateChange = () => {

  }

  return (
    <Modal {...modalOpts}>
      <Row gutter={16}>
        <Col span={4}>
          <Card title="预览区" bordered={true}>
            <div>
              预览区
            </div>
          </Card>
          </Col>
        <Card title="编辑区" bordered={true}>
          <Col span={20}>
      <Form layout="horizontal">
        <FormItem label="标题" hasFeedback {...formItemLayout}>
          {getFieldDecorator('title', {
            initialValue: item.title,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input placeholder="这里输入标题" />)}
        </FormItem>
        <FormItem label="作者" hasFeedback {...formItemLayout}>
          {getFieldDecorator('author', {
            initialValue: item.author,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input placeholder="这里输入作者" />)}
        </FormItem>
        <FormItem label="内容" hasFeedback {...formItemLayout}>
          {getFieldDecorator('address', {
            initialValue: item.address && item.address.split(' '),
            rules: [
              {
                required: true,
              },
            ],
          })(  <Editor
            wrapperStyle={{
                minHeight: 500,
              }}
            editorStyle={{
                minHeight: 376,
              }}
            onEditorStateChange={onEditorStateChange}
          />)}
        </FormItem>
        <FormItem label="跳转链接" hasFeedback {...formItemLayout}>
          {getFieldDecorator('author', {
            initialValue: item.author,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input placeholder="这里输入作者" />)}
        </FormItem>
        <FormItem label="发布样式编辑" hasFeedback {...formItemLayout}>
          {getFieldDecorator('author', {
            initialValue: item.author,
            rules: [
              {
                required: true,
              },
            ],
          })(
            <div>
              <p>封面小图片建议尺寸：200像素 * 200像素</p>
              <Button>从图片库选择</Button>
            </div>
            )}
        </FormItem>
        <FormItem label="摘要" hasFeedback {...formItemLayout}>
          {getFieldDecorator('author', {
            initialValue: item.author,
            rules: [
              {
                required: true,
              },
            ],
          })(<TextArea placeholder="选填，如果不填写会默认抓取正文前54个字" autosize={{ minRows: 2, maxRows: 6 }} />)}
        </FormItem>
      </Form>
            </Col>
          </Card>
      </Row>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
